<template>
    <div id="big">
        <!-- 轮播图 -->
        <el-carousel :interval="5000" arrow="always" class="top_lbt" >
    <el-carousel-item v-for="(item,index) in top_lbt" :key="index" style="width:100%;height:460px">
      <img :src="'http://106.15.179.105:3000/'+item.imgPath" style="width:100%;height:100%">
    </el-carousel-item>
  </el-carousel>
        <!-- 轮播图 -->


        <!-- 手机 -->
        <p style="width:100%;height:60px;font-size:26px;line-height: 80px;padding-left:15px;">手机</p>
        <div id="sj_big">
         <img src="http://106.15.179.105:3000/public/imgs/phone/phone.png" style="height:100%;width:20%;float: left;">
         <div class="sj_kp">
             <!-- 商品卡片 -->
             <div class="sj_kpmin" v-for="(item,index) in sjarr" :key="index" @click="sjxq(item.product_id)">
                 <el-card shadow="hover">
                     <img :src="'http://106.15.179.105:3000/'+item.product_picture" class="sj_img">
                      <p style="text-align: center;">{{item.product_name}}</p>
                      <div style="font-size:12px;text-align: center;color:gray;margin-top:10px;">{{item.product_title}}</div>
                      <div style="text-align: center;margin-top:20px;font-size:18px;margin-bottom:12px">
                          <span style="color:#ff6700">{{item.product_selling_price}}元&ensp;</span>
                          <s v-if="item.product_selling_price!==item.product_price" style="color:gray">{{item.product_price}}元</s>
                      </div>
                 </el-card>
             </div>


             <div class="sj_kpmin"  @click="sj_fl">
                 <el-card shadow="hover">
                     <div class="sj_div">
                         <span> 浏览更多&ensp;》</span>      
                     </div>
                    
                 </el-card>
             </div>
 
             <!-- 商品卡片 -->

         </div>
        </div>
        <!-- 手机 -->










        <!-- 家电 -->
             <div style="width:100%;height:60px;line-height: 80px;padding-left:15px;overflow: hidden;">
                 <span style="font-size:26px;">家电</span>
                <div class="jd_rm" :style="dyhr" @mouseover="sj_dyhr" >电影影视</div> 
                <div class="jd_rm" :style="rmhr" @mouseover="sj_rmhr" >热门</div>
            </div>
             <div class="jd_big">
                 <div class="jd_left">
                     <div class="jd_leftimg">
             <el-card shadow="hover" :body-style="{ padding: '0px',height:'100%',width:'100%' }">
          <img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo1.png" style="width:100%;height:100%">
               </el-card>
                     </div>
                      <div class="jd_leftimg">
             <el-card shadow="hover" :body-style="{ padding: '0px',height:'100%',width:'100%' }">
          <img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo2.png" style="width:100%;height:100%">
               </el-card>
                     </div> 
                 </div>



                 <div style="width:80%;height:100%;float:right" class="jd_right">
                     <div class="jd_right_list" v-for="(item,index) in jdarr" :key="index"  @click="sjxq(item.product_id)">
                          <el-card shadow="hover">
               <img :src="'http://106.15.179.105:3000/'+item.product_picture" style="width:80%;height:120px">


               <p style="font-size:14px;height:45px;overflow: hidden;">{{item.product_name}}</p>
                      <div style="font-size:10px;color:grey;overflow: hidden;height:14px;">{{item.product_title}}</div>
                      <div style="text-align: center;margin-top:20px;font-size:18px;margin-bottom:12px">
                          <span style="color:#ff6700">{{item.product_selling_price}}元&ensp;</span>
                          <s v-if="item.product_selling_price!==item.product_price" style="color:gray">{{item.product_price}}元</s>
                      </div>





                          </el-card>
                     </div>
                     <div class="jd_right_list" @click="fl_jd">
                         
                              <el-card shadow="hover">
                                  <div class="jd_zz">
                                       <span> 浏览更多&ensp;》</span>  
                                  </div>
                        
                          </el-card>
                        
                         
                     </div>

 
                 </div>

        
     
             </div>
        <!-- 家电 -->





















         <!-- 配件 -->
             <div style="width:98%;height:60px;line-height: 80px;padding-left:15px;">
                 <span style="font-size:26px;">配件</span>
                 <div class="jd_rm" :style="pz_cdbhr" @mouseover="pz_cdb">充电器</div>
                 <div class="jd_rm" :style="pz_bhthr" @mouseover="pz_bht" >保护套</div> 
                 <div class="jd_rm" :style="pz_rmhr" @mouseover="pz_rm" >热门</div>
                
            </div>
             <div class="jd_big">
                 <div class="jd_left">
                     <div class="jd_leftimg">
             <el-card shadow="hover" :body-style="{ padding: '0px',height:'100%',width:'100%' }">
          <img src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo1.png" style="width:100%;height:100%">
               </el-card>
                     </div>
                      <div class="jd_leftimg">
             <el-card shadow="hover" :body-style="{ padding: '0px',height:'100%',width:'100%' }">
          <img src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo2.png" style="width:100%;height:100%">
               </el-card>
                     </div> 
                 </div>



                 <div style="width:80%;height:100%;float:right" class="jd_right">
                     <div class="jd_right_list" v-for="(item,index) in pzarr" :key="index"  @click="sjxq(item.product_id)">
                          <el-card shadow="hover">
               <img :src="'http://106.15.179.105:3000/'+item.product_picture" style="width:80%;height:120px">


               <p style="font-size:14px;height:45px;overflow: hidden;">{{item.product_name}}</p>
                      <div style="font-size:10px;color:grey;overflow: hidden;height:14px;">{{item.product_title}}</div>
                      <div style="text-align: center;margin-top:20px;font-size:18px;margin-bottom:12px">
                          <span style="color:#ff6700">{{item.product_selling_price}}元&ensp;</span>
                          <s v-if="item.product_selling_price!==item.product_price" style="color:gray">{{item.product_price}}元</s>
                      </div>





                          </el-card>
                     </div>
                     <div class="jd_right_list" @click="fl_pj">
                         
                              <el-card shadow="hover">
                                  <div class="jd_zz">
                                       <span> 浏览更多&ensp;》</span>  
                                  </div>
                        
                          </el-card>
                        
                         
                     </div>









                     
                 </div>

        
     
             </div>
        <!-- 配件 -->



















        
    </div>
</template>

<script>
export default {
    data() {
        return {
            top_lbt:[],
            sjarr:[],
            rmhr:"width:40px;color:#ff6700;border-bottom:2px solid #ff6700;cursor: pointer;",
            dyhr:"",
            jdarr:[],
            pz_rmhr:"width:40px;color:#ff6700;border-bottom:2px solid #ff6700;cursor: pointer;",
            pz_bhthr:"",
            pz_cdbhr:"",
            pzarr:[],
            fl_id:[1],//更多浏览分类id
        };
    },

    mounted() {
        this.lbt_top();//轮播图
        this.sjadd();//手机
        this.sj_rmhr();
        this.pz_rm();
    },

    methods: {
        //头部轮播图
       async lbt_top(){
       let {data} =await this.$axios.post("api/resources/carousel")
    //    console.log(data)
       this.top_lbt=data.carousel
        },
        async sjadd(){
            let {data}=await this.$axios.post("api/product/getPromoProduct",{categoryName: "手机"})
            // console.log(data)
            this.sjarr=data.Product
        },
        // 手机
        //热门划入
       async sj_rmhr(){
            this.rmhr="width:40px;color:#ff6700;border-bottom:2px solid #ff6700;cursor: pointer;"
            this.dyhr=""
            let {data}=await this.$axios.post("api/product/getHotProduct",{categoryName: ["电视机", "空调", "洗衣机"]})
         
            this.jdarr=data.Product
        },
        //电影影视划入
      async  sj_dyhr(){
            this.rmhr="width:40px;"
            this.dyhr="color:#ff6700;border-bottom:2px solid #ff6700;cursor: pointer;"
            let {data}=await this.$axios.post("api/product/getPromoProduct",{categoryName: "电视机"})
            this.jdarr=data.Product
        },



        //配置
        //配置热门
       async pz_rm(){
            this.pz_rmhr="width:40px;color:#ff6700;border-bottom:2px solid #ff6700;cursor: pointer;"
            this.pz_bhthr=""
            this.pz_cdbhr=""
            let {data}=await this.$axios.post("api/product/getHotProduct",{categoryName: ["保护套", "保护膜", "充电器", "充电宝"]})
         
            this.pzarr=data.Product
        },
        //配置保护套
         async pz_bht(){
            this.pz_rmhr="width:40px;"
            this.pz_bhthr="width:70px;color:#ff6700;border-bottom:2px solid #ff6700;cursor: pointer;"
            this.pz_cdbhr=""
            let {data}=await this.$axios.post("api/product/getPromoProduct",{categoryName: "保护套"})
         
            this.pzarr=data.Product
        },
         //配置充电宝
         async pz_cdb(){
            this.pz_rmhr="width:40px;"
            this.pz_bhthr=""
            this.pz_cdbhr="width:70px;color:#ff6700;border-bottom:2px solid #ff6700;cursor: pointer;"
            let {data}=await this.$axios.post("api/product/getPromoProduct",{categoryName: "充电器"})
         
            this.pzarr=data.Product
        },

        //详情
        sjxq(id){
            this.$router.push("/sjxq/?id="+id)
            console.log(id)
        },
        sj_fl(){
            this.$router.push('/fl/?id='+this.fl_id)
             this.fl_id=[1];
            this.fl();
        },
        async fl(){
                 let {data}=await this.$axios.post("api/product/getProductByCategory",{categoryID:this.fl_id, currentPage:1, pageSize: 15})
                 let arr =data.Product
               this.$store.commit('fladd',arr)
               console.log(arr,"111")

        },
        fl_jd(){
            this.$router.push('/fl/?id='+2)
             this.fl_id=[3,4,2];
             console.log( this.fl_id)
            this.fl();
        },
         fl_pj(){
            this.$router.push('/fl/?id='+3)
             this.fl_id=[5,7,8];
             console.log( this.fl_id)
            this.fl();
        }










    },
};
</script>

<style scoped>
#big{
    width: 100%;
    /* height: 500px;
    background-color: pink; */
    padding-top: 1px;
}
.top_lbt{
    width: 100%;
    height: 460px;
    background-color: pink;
}
#sj_big{
    width: 100%;
    height: 615px;
}
.sj_kp{
    width: 80%;
    height: 100%;
    /* background-color: pink; */
    margin-left: 20%;
    display: flex;
    flex-wrap: wrap;
}
.sj_kpmin{
    width: 22%;
    height: 45%;
    margin-left: 3%;
    cursor: pointer;
}
.sj_kpmin:nth-child(5){
    margin-top: 2%;
}
.sj_kpmin:nth-child(6){
    margin-top: 2%;
}
.sj_kpmin:nth-child(7){
    margin-top: 2%;
}
.sj_kpmin:nth-child(8){
    margin-top: 2%;
}
.sj_img{
    width: 100%;
    height: 150px;
}
.sj_div{
    width: 100%;
    height: 45%;
    text-align: center;
    padding-top: 100px;
    font-size: 20px;
     padding-bottom: 127px;
}
.sj_div>span:hover{
    color: #ff6700;
}
.jd_big{
    width: 100%;
    height: 615px;
    /* background-color: pink; */
    overflow: hidden;
}
.jd_rm{
    float: right;
    width: 70px;
    margin-top: 20px;
    height: 30px;
    line-height: 30px !important;
    text-align: center;
    /* background-color: pink; */
    margin-right: 20px;
}
.jd_left{
    width: 20%;
    height: 100%;
    /* background-color: #0af; */
    float: left;
}
.jd_leftimg{
    width: 90%;
    margin: 5%;
}
.jd_leftimg:nth-child(2){
    margin-top: 30px;
}
.jd_right{
display: flex;
flex-wrap: wrap;
}
.jd_right_list{
    width: 21%;
    height: 45%;
    /* background-color: white; */
    margin:1.5% ;
    overflow: hidden;
    text-align: center;
    padding: 2px;
    cursor: pointer;
}
.jd_right_list:nth-child(1){
    margin-left: 3.5%;
}
.jd_right_list:nth-child(5){
    margin-left: 3.5%;
}
.jd_zz{
    padding-top: 100px;
    padding-bottom: 150px;
    font-size: 20px;
}
.jd_zz>span:hover{
    color: #ff6700;
    cursor: pointer;
}

</style>